<template>
	<view class="overdue">
		<image src="../../static/good.jpg" mode="scaleToFill" class="image" v-if="!expiredList['dateList'].length"></image>
		<view class="overdue-container" v-else>
			<view class="clearButton"><button type="primary" @click="handleRemoveRecord">清空记录</button></view>
			<div v-for="(timeItem, index) in expiredList['dateList']" :key="index">
				<view class="dateTitle">{{ timeItem.date }}</view>
				<view class="overdue-list" :class="{ active: !timeItem.isAllDone }">
					<view class="overdue-list-item" v-for="(item, index) in expiredList['expiredTasks']" :key="item.id">
						<view class="overdue-content" v-if="timeItem.date === item.date" @click="handleLookExpiredItem(item.id)">
							<view class="overdue-left">
								<view class="info">{{ item.content }}</view>
							</view>
							<view class="overdue-right"><icon type="info" class="icon"></icon></view>
						</view>
					</view>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {};
	},
	computed: {
		...mapState(['expiredList'])
	},
	methods: {
		...mapMutations(['ModifyStatus', 'saveFromPage', 'removeRecord']),
		handleLookExpiredItem(id) {
			uni.navigateTo({
				url: `../edit/edit?id=${id}`
			});
			this.ModifyStatus({ showButtons: false, disabled: true, lookDoneItem: false, lookExpiredItem: true });
			this.saveFromPage('overdue');
		},
		handleRemoveRecord() {
			uni.showModal({
				title: '提醒',
				content: '清空已过期记录',
				success: res => {
					if (res.confirm) {
						this.removeRecord({name:'expiredList',date:null});
					} else {
						return;
					}
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.overdue {
	padding: 20rpx;
	.image {
		margin: 50% auto;
	}
	.overdue-container {
		.clearButton {
			margin-bottom: 20rpx;
		}
		.overdue-list {
			font-size: 35rpx;
			font-weight: normal;
			border-bottom: 1rpx dashed #e8e8e8;
			color: #95a5a6;
			padding-bottom: 10rpx;
			.overdue-list-item {
				.overdue-content {
					display: flex;
					align-items: center;
					width: 100%;
					height: 60rpx;
				}
				.overdue-left {
					height: 100%;
					line-height: 60rpx;
					width: 70%;
					.info {
						width: 100%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}

				.overdue-right {
					width: 30%;
					height: 100%;
					text-align: center;
					.icon {
						height: 100%;
						line-height: 30rpx;
					}
				}
			}
		}
	}
}
</style>
